<template>
  <header class="header">
    <!-- 头部的第一行 -->
    <div class="top">
      <div class="container">
        <div class="loginList">
          <p>尚品汇欢迎您！</p>
          <!-- 没有用户名，未登录 -->
          <p v-if="!userName">
            <span>请</span>
            <!-- 声明式导航：router-link务必要有to属性 -->
            <router-link to="/login">登录</router-link>
            <router-link class="register" to="/register">免费注册</router-link>
          </p>
          <!-- 登陆了 -->
          <p v-else>
            <a>{{userName}}</a>
            <a class="register" @click="logout">退出登录</a>
          </p>
        </div>
        <div class="typeList">
          <router-link to="/center/myorder">我的订单</router-link>
          <router-link to="/shopcart">我的购物车</router-link>
          <a href="###">我的尚品汇</a>
          <a href="###">尚品汇会员</a>
          <a href="###">企业采购</a>
          <a href="###">关注尚品汇</a>
          <a href="###">合作招商</a>
          <a href="###">商家后台</a>
        </div>
      </div>
    </div>
    <!--头部第二行 搜索区域-->
    <div class="bottom">
      <h1 class="logoArea">
        <router-link class="logo" to="/home">
           <svg t="1694567808328" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="200" height="80"><path d="M1022.750074 897.201157l-50.697862-401.363494h-76.050406c35.496451 0 42.259056-38.025203 42.259056-38.025203V280.388005c0-43.884682-38.032428-46.478459-38.032428-46.478459H703.007465l23.813617-67.589924h245.23113l-29.586397-59.158344H747.643548l8.930106-25.345318h-71.816552l-8.561632 25.345318h-185.754886l33.798575 59.158344h132.015297L570.703168 419.801707c-3.280152 26.768645-16.899287 25.352544-16.899287 25.352544h-27.332195l-44.477133-363.331066H198.62262l-9.052931 25.345318h258.619064l29.579172 54.931716H169.953799l-30.171622 84.481987V255.042687h114.068384v-50.705087h59.151118V255.042687h147.866959l29.579171 50.697862H312.994454v147.866958s-4.746828 30.576222-25.395893 42.244606h194.388767l46.471234 342.205151h12.679884l59.151119-114.068384V622.585931h-8.446032v29.586397s5.050279 22.513116-38.032427 21.125915l-29.571947-50.705087h12.672659V546.549975h54.931715v21.118691h12.67266v-46.471234h63.370521v46.471234h33.798575l-16.899287 54.931715h-16.906513v101.388499h16.899288l29.586396 50.705087H667.879489v105.615128h21.125916l84.489212-240.802202h63.370521l-84.496437 245.02883s-10.765258 37.859028-28.01857 50.697862h63.767896l-27.29607-50.697862s22.224116-0.252875 25.345319-21.133141l76.043181-223.895689h59.151118v-33.813024s-6.95768-6.56753-16.899288-4.226628h-124.797516l-6.170154 21.13314h-71.816553l38.032428-101.388499h63.370521l-7.383955 25.352543h142.578254s42.446906 5.115304 42.251831 42.244606v308.421026s-3.612503 27.29607-29.550271 38.017978h59.122218c-0.0289-0.0289 18.857264 1.596726 12.650984-38.046878zM435.508869 436.700995l-38.025203 46.478459-8.446031-59.151118-59.158343-21.125916 54.931715-25.345318V318.405983l46.471234 46.471234 59.158343-16.899287-29.586396 50.705087 38.032427 50.697862-63.377746-12.679884z m443.6081-135.194299v130.967671c-1.336626 13.49631-12.679884 12.672659-12.679884 12.672659h-114.068384l29.579172 50.697862H587.60968c36.544077-11.198758 38.025203-42.244606 38.025203-42.244606l58.038468-164.766245h182.770959c16.162337 0.758626 12.672659 12.672659 12.672659 12.672659z m-667.511014 578.795174c-37.346052-7.07328-46.478459-54.92449-46.478459-54.92449V622.585931h-54.92449v198.56482c-2.312002 49.830861-38.025203 63.370521-38.025203 63.370522H0.3757l29.571947 50.697862h46.471234c57.966217 0.801976 67.59715-54.92449 67.597149-54.92449-1.445001 34.477725 59.143893 54.92449 59.143894 54.92449h80.269809l-33.798575-54.92449h-38.025203z m240.809426-333.751895H342.573626l8.446031-25.352543h-71.823778L249.623933 600.051139V567.668666c-0.881451-43.667932-46.485684-46.471234-46.485684-46.471234H29.933197v299.960544h59.158343V576.121922h84.489212c20.29504-0.722501 16.899287 21.11869 16.899288 21.11869v223.917364h59.151118V622.585931h67.589924l7.051606-21.125915H418.616807c17.665138-1.192126 12.672659 16.906512 12.672659 16.906512v253.482086l-4.226628 8.453256H296.095167l33.798575 54.92449h122.521639c43.689607-4.053228 42.251831-46.471234 42.251831-46.471234V601.460016c3.200677-47.86566-42.251831-54.91004-42.251831-54.910041zM59.505144 440.927623h29.579171s4.992479 2.817752 16.899288-29.571947c11.892359-32.389699 29.579172-71.823778 29.579171-71.823777h67.5827l-54.917265 135.187074s-11.090383 19.796514-29.571947 21.125915h103.346476l-27.303295-50.697862h50.705087s8.821731-1.618401 8.446031-12.672659V305.733324h-152.086361c-51.846638 0-38.032428-46.471234-38.032428-46.471234l36.710252-97.169096H72.185028l-29.571947-54.931716h78.579158l9.573132-25.345318H38.386453s-28.365371-0.2601-21.125915 38.025203l42.244606 321.08646z m359.104438 388.68361V753.568052h-50.697863v38.025203c0.223975 7.17443-4.219403 8.453256-4.219403 8.453256H321.440485l59.151119-160.539618H321.440485l-54.92449 160.539618c-14.804036 42.150681 16.899287 54.917265 16.899288 54.917265h105.622352c26.118394-0.21675 29.571947-25.352544 29.571947-25.352543z m502.744768-166.117322l-88.71584 237.941099s-6.777055 23.900318-24.507218 33.79135h77.148606l-27.288845-50.697862h54.931716s10.526833-3.691978 8.446031-12.679884l-0.01445-208.354703z m-253.482086 271.725224h31.081973l-31.081973-48.34251v48.34251z m-118.295011-46.471234l-16.899288-25.359769 8.453256 71.816553h63.370522v-92.935243c0.007225 0.007225-22.245791 60.87067-54.92449 46.478459z" fill="#d81e06" p-id="4049"></path></svg>
        </router-link>
      </h1>
      <div class="searchArea">
        <form action="###" class="searchForm">
          <input
            type="text"
            id="autocomplete"
            class="input-error input-xxlarge"
            v-model="keyword"
          />
          <button class="sui-btn btn-xlarge btn-danger" type="button"  @click="goSearch">
            搜索
          </button>
        </form>
      </div>
    </div>
  </header>
</template>
<script>
export default {
 
  data(){
    return{
      keyword:''
    }
  },
  methods:{
    // 搜索按钮的回调函数：需要向search路由进行跳转
    goSearch(){
      // 路由传递参数
      // 第一种：字符串形式
      // this.$router.push('/search'+this.keyword+"?k="+this.keyword.toUpperCase())
      // 第二种：模板字符串
      // this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
      // 第三种：对象
      // this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
// *******************************************************************************************
      // 面试题1：路由传递参数（对象写法）path是否可以结合params参数一起使用？
      // 路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用
      // this.$router.push({path:'/search',parmas:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

      // 面试题2：如何指定params参数可传可不传？
      // 如果路由要求传递params参数，但是你就不传递params参数，发现一件事情，URL会有问题的
      // 如何指定params参数可以传递、或者不传递，在配置路由的时候，在占位的后面加上一个问号【params可以传递或者不传递】
      // this.$router.push({name:'search',query:{k:this.keyword.toUpperCase()}});

      // 面试题3：params参数可以传递也可以不传递，但是如果传递是空串，如何解决
      // 使用undefined解决：params参数可以传递、不传递（空的字符串）
      // this.$router.push({name:'search',params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}})

      // 面试题4：路由组件能不能传递props数据？
      // // 可以的：三种写法,布尔值、对象、函数
      // 下面这种写法可以解决当前这个抛出异常错误的问题，但是将来我们还是会用到push|replace方法进行路由跳转，还是会出现此类问题，
      // 因此我们需要从“根”解决这个问题，就是咋们自己重写push||replace方法，push|replace ,是VueRouter.prototype原型对象提供的

 
      // 代表的是如果有query参数也带过去
      if(this.$route.query){
        let location={name:"search",params:{keyword:this.keyword||undefined}}
        // console.log(location)
        location.query=this.$route.query
        this.$router.push(location)
      }
     
    },
   async logout(){
      // 退出登录需要做的事情
      // 1：需要发请求，通知服务器退出登录【清楚一些数据：token】
      // 2:清除项目当中的数据【userInfo、token】
     
      try {
        //  alert(123)
        // 如果退出成功
        await this.$store.dispatch('userLogout');
        // 回到首页
        this.$router.push('/home');
      } catch (error) {
        
      }
    }
  },
  mounted(){
    // 通过全局事件总线清除关键字
    this.$bus.$on("clear",()=>{
      this.keyword='';
    })
  },
  computed:{
    // 用户名信息
    userName(){
      return this.$store.state.user.userInfo.name;
    }
  },
};
</script>


<style scoped lang="less">
    .header {
        &>.top {
            background-color: #eaeaea;
            height: 30px;
            line-height: 30px;

            .container {
                width: 1200px;
                margin: 0 auto;
                overflow: hidden;
                font-size: 11px;

                .loginList {
                    float: left;

                    p {
                        float: left;
                        margin-right: 10px;

                        .register {
                            border-left: 1px solid #b3aeae;
                            padding: 0 5px;
                            margin-left: 5px;
                        }
                    }
                }

                .typeList {
                    float: right;

                    a {
                        padding: 0 10px;

                        &+a {
                            border-left: 1px solid #b3aeae;
                        }
                    }

                }

            }
        }

        &>.bottom {
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;

            .logoArea {
                float: left;

                .logo {
                    img {
                        width: 175px;
                        margin: 25px 45px;
                    }
                }
            }

            .searchArea {
                float: right;
                margin-top: 35px;

                .searchForm {
                    overflow: hidden;

                    input {
                        box-sizing: border-box;
                        width: 490px;
                        height: 32px;
                        padding: 0px 4px;
                        border: 2px solid #ea4a36;
                        float: left;

                        &:focus {
                            outline: none;
                        }
                    }

                    button {
                        height: 32px;
                        width: 68px;
                        background-color: #ea4a36;
                        border: none;
                        color: #fff;
                        float: left;
                        cursor: pointer;

                        &:focus {
                            outline: none;
                        }
                    }
                }
            }
        }
    }
</style>